<template>
  <div class="amusement">
    <main-nav-bar />
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel trigger="click" height="50vh">
        <el-carousel-item v-for="(item, index) in getCarousel" :key="index">
          <h3 class="text-light">{{ item.title }}</h3>
          <p class="text-light">{{ item.source }}</p>
          <img
            class="h-100 img-fluid"
            :src="item.imgsrc"
            alt=""
            style="width:90%;"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 热点新闻 -->
    <titles>
      <small slot="small">Hot News</small>
      <h1 slot="h1">热点新闻</h1>
      <button @click="moreNews" type="button " class="btn btn-primary more">
        换一批
      </button>
      <template v-slot:sectionBody>
        <div class="container">
          <div class="row hotNews my-scroll">
            <div
              class="my-card card my-3"
              v-for="(item, index) in getCarousel"
              :key="index"
            >
              <div class="card-body">
                <h1 class="card-text">{{ item.title }}</h1>
                <span>
                  {{ item.time }}
                  <a :href="item.pc_url">新闻详情</a>
                </span>

                <p>
                  {{ item.digest }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </template>
    </titles>

    <!-- 美文欣赏 -->
    <titles>
      <small slot="small">Hot News</small>
      <h1 slot="h1">
        美文欣赏
      </h1>
      <button @click="more" type="button " class="btn btn-primary more">
        换一批
      </button>

      <template v-slot:sectionBody>
        <div class="container position-relative">
          <div class="row   myrow ">
            <div
              class="card artics  hvr-grow-shadow"
              v-for="(item, index) in articles"
              :key="index"
            >
              <span class="show" @click="showArtic(item, index)">点击查看</span>
              <div class="card-body">
                <h4 class="card-title text-center">
                  {{ item.title }} <br />
                  {{ item.author }}
                </h4>
                <p class="card-text text-start" v-html="item.content"></p>
              </div>
            </div>
            <div class="card cards " v-show="isShow">
              <div class="spanList markSpanList">
                <span class="closespan " @click="closeMark">点击关闭</span>
                <span class="closespan " @click="nextArtic()">下一篇</span>
                <span class="closespan " @click="preArtic()">上一篇</span>
              </div>
              <div class="card-body my-scroll" style="overflow:scroll;">
                <h4 class="card-title text-center">
                  {{ articlesItem.title }} <br />
                  {{ articlesItem.author }}
                </h4>
                <p
                  class="card-text text-start"
                  v-html="articlesItem.content"
                ></p>
              </div>
            </div>
          </div>
        </div>
      </template>
    </titles>
    <div class="mark" v-show="isShow" @click="closeMark"></div>

    <!-- 人生哲理 -->
    <titles>
      <small class="d-inline-block fs-6 mt-2 px-1 py-1" slot="small">
        Literature appreciation
      </small>
      <h1 slot="h1">
        人生哲理
      </h1>
      <template v-slot:sectionBody>
        <div class="row">
          <p class="my-3 ">{{ newsList }}</p>
        </div>
      </template>
    </titles>

    <!-- 笑话大全 -->
    <titles>
      <small slot="small">Joke List</small>
      <h1 slot="h1">
        逗趣笑话
      </h1>

      <template v-slot:sectionBody>
        <div class="row mt-5 d-flex justify-content-center aligin-item-center">
          <div
            class=" col-11 col-sm-11  col-md-5 mx-3 my-3"
            v-for="(item, index) in jokesList"
            :key="index"
          >
            <div class="card my-joke my-scroll ">
              <div class="card-body">
                <h5 class="card-title">{{ item.title }}</h5>
                <p class="card-text">{{ item.content }}</p>
              </div>
            </div>
          </div>
          <h4 v-if="!loading" @click="moreJoke" class="more ">
            加载更多
          </h4>
          <h4 v-else class="more">
            加载中...
          </h4>
        </div>
      </template>
    </titles>
  </div>
</template>

<script>
import Titles from "@/components/Titles.vue";

import MainNavBar from "@/common/NavBar/MainNavBar.vue";

export default {
  data() {
    return {
      hotNews: [],
      pageNews: 1,
      count: 10,
      isShow: false,
      articles: [],
      articlesItem: [],
      page: 1,
      getCarousel: [],
      currentIndex: 0,
      jokesList: [],
      jokePage: 1,
      num: 4,
      loading: false,
      newsList: "",
    };
  },

  components: {
    Titles,
    MainNavBar,
  },
  created() {
    this.getArtics();
    this.getCarouselImg();
    this.getSentence();
    this.getJokes();
  },
  computed: {
    noMore() {
      return this.count >= 20;
    },
  },
  methods: {
    //获取轮播图,热点新闻列表
    async getCarouselImg() {
      const data = await this.$http.get("https://v2.alapi.cn/api/new/toutiao", {
        params: {
          type: "1",
          page: this.pageNews,
          token: "RbNodDkj5sXHjenGxjqh",
        },
      });
      if (data.code == 200) {
        this.getCarousel = data.data;
      }
    },
    // 换一批新闻
    moreNews() {
      this.pageNews++;
      this.getCarouselImg();
    },
    //获取文章
    async getArtics() {
      const data = await this.$http.get("https://v2.alapi.cn/api/mryw/list", {
        params: {
          cate: "everyday",
          page: this.page,
          token: "RbNodDkj5sXHjenGxjqh",
        },
      });
      if (data.code == 200) {
        this.articles = data.data;
        this.articles.pop();
      }
    },
    //加载新文章
    more() {
      this.page = this.page + 1;
      this.getArtics();
    },
    // 展示完整文章
    showArtic(item, index) {
      this.currentIndex = index;
      this.articlesItem = item;
      this.isShow = true;
    },
    // 下一篇
    nextArtic() {
      // if (this.currentIndex > this.articles.length - 2) {
      //   this.currentIndex = 0;
      // } else this.currentIndex++;
      this.currentIndex > this.articles.length - 2
        ? (this.currentIndex = 0)
        : this.currentIndex++;
      this.articlesItem = this.articles[this.currentIndex];
    },
    // 上一篇
    preArtic(item) {
      // if (this.currentIndex < 1) {
      //   this.currentIndex = this.articles.length - 1;
      // } else this.currentIndex--;
      this.currentIndex < 1
        ? (this.currentIndex = this.articles.length - 1)
        : this.currentIndex--;
      this.articlesItem = this.articles[this.currentIndex];
    },
    //关闭遮罩层
    closeMark() {
      this.isShow = false;
    },
    //人生哲理
    async getSentence() {
      const { data: data } = await this.$http.get(
        "https://v2.alapi.cn/api/hitokoto",
        {
          params: {
            type: "k",
            format: "json",
            token: "RbNodDkj5sXHjenGxjqh",
          },
        }
      );
      this.newsList = data.hitokoto;
    },
    async getJokes() {
      const data = await this.$http.get("https://v2.alapi.cn/api/joke", {
        params: {
          page: this.jokePage,
          num: this.num,
          token: "RbNodDkj5sXHjenGxjqh",
        },
      });

      if (data.code == 200) {
        this.jokesList = data.data;
      }
    },
    moreJoke() {
      if (this.num > 8) {
        this.jokePage++;
        this.num = 2;
      } else {
        this.num += 2;
      }
      setTimeout(() => {
        this.getJokes();
        this.loading = false;
      }, 1000);
      this.loading = true;
    },
  },
};
</script>

<style lang="less" scoped>
//
.amusement {
  margin-top: 6.875rem;
  position: relative;
  .block {
    position: relative;
    h3 {
      position: absolute;
      bottom: 10%;
      left: 50%;
      transform: translate(-50%);
    }
    p {
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translate(-50%);
    }
  }
  .hotNews {
    margin-top: 30px;
    padding: 0 60px;
    height: 80vh;
    overflow: scroll;
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

p {
  font-weight: normal;
}
//美文
.artics {
  position: relative;
  width: 22rem;
  height: 18.75rem;
  padding: 50px 15px;
  margin-top: 1.875rem;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
}
.card .spanList,
.show {
  position: absolute;
  right: 30px;
  top: 0.625rem;
}
.show {
  background: #000;
  color: #fff;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
}
.spanList span {
  cursor: pointer;
  display: inline-block;
  padding: 5px;
  background-color: #f6e58d;
}
.myrow {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
// 遮罩层
.mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.cards {
  position: absolute;
  padding: 3rem;
  width: 31.25rem;
  height: 37.5rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.markSpanList {
  span {
    margin: 0 5px;
    background: #000;
    color: #fff;
    border-radius: 4px;
  }
}
.closespan {
  z-index: 3;
}
.more {
  align-self: flex-end;
  cursor: pointer;
}
//笑话
.my-joke {
  height: 12.5rem;
  overflow: scroll;
}
</style>
